import { Select, Button, Row, Col } from 'szcd';
import { type Option } from '../../types';
import React from 'react';
import styles from './index.module.less';
import { type ModalFuncProps } from 'antd';
interface IView {
  mode?: 'multiple';
  value: Option[];
  onChange?: (value: Option[]) => void;
  buttonLabel?: string;
  modalProps?: ModalFuncProps;
  show: () => void;
}

const CommonSelector: React.FC<IView> = function ({ buttonLabel, value, onChange, show, mode = 'multiple', modalProps, ...restProps }) {
  return <>
    <Row gutter={[8, 0]}>
      <Col flex="1">
        <Select style={{ flex: 1 }} value={value} labelInValue className={styles['hide-arrow']}
          onChange={(e) => {
            onChange?.(e);
          }}
          open={false}
          mode={mode}
        />
      </Col>
      <Col flex="100px" >
        <Button style={{ width: '80px' }} onClick={() => {
          show();
        }}
        >{buttonLabel || (mode === 'multiple' ? '添加' : '选择')}</Button>
      </Col>
    </Row>
  </>;
};

export default CommonSelector;